<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet/less" href="./css/end.less">
</head>
<body>
    <div class="view">
        <div class="left">
            <div class="ckLeft"><</div>
            <div class="ckRight">></div>

            <img class="leftImage" src="./img/shop/01.png">
            <img class="leftImage" src="./img/shop/02.png">
            <img class="leftImage" src="./img/shop/03.png">
        </div>

        <div class="right">
            <div>
                <h1>Xiaomi手机</h1>
                <p>
                    <span>「购机至高享24期免息，+199得50W立式无线充Pro，12月31日-1月27日 延保、碎屏保限时6折」</span>
                    第二代骁龙8｜2K OLED 屏幕 | 徕卡专业光学镜头｜
                    徕卡原生双画质｜徕卡75mm浮动长焦｜120W澎湃秒充
                </p>
            </div>
            <div>
                <p>选择版本</p>

                <div>
                    <div class="border borderDefault">8GB+128GB</div>
                    <div class="border borderDefault">8GB+256GB</div>
                    <div class="border borderDefault">12GB+256GB</div>
                    <div class="border borderDefault">12GB+512GB</div>
                </div>
            </div>
            <div>
                <p>选择颜色</p>

                <div>
                    <div class="border borderDefault">陶瓷黑</div>
                    <div class="border borderDefault">旷野绿（陶瓷)</div>
                </div>
            </div>

            <div>
                <div>
                    总计:  <span>5799元</span>
                </div>
                <div>立即购买</div>
            </div>
        </div>
    </div>
</body>
</html>

<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/less.min.js"></script>
<script>
    let leftImage = document.getElementsByClassName('leftImage');
    let ckLeft = document.getElementsByClassName('ckLeft')[0];
    let ckRight = document.getElementsByClassName('ckRight')[0];
    let border = document.getElementsByClassName('border');
</script>
<script>
    /**
     * 这个函数是点击dom就选中dom，根据类名修改样式
     * 第一个是循环的dom
     * 第二个是固定类名
     * 第三个是旧类名
     * 第四个是新类名
     * 第五个是是否要设置初始选中（默认false）
     * 第六个是默认初始选中
    */
    function selectDom(domArr, fixedClass, domClass, domNewClass, isDefault = false, index = 0) {
        if (isDefault) {
            domArr[index].className = domNewClass;
        }
        
        domArr.forEach((element, index) => {
            element.addEventListener('click',() => {
                // 先循环给默认再给点击的样式
                domArr.forEach(element2 => {
                    element2.className = `${fixedClass} ${domClass}`;
                })
                element.className = `${fixedClass} ${domNewClass}`;
            });
        });
    }
</script>
<script>
    let borderTopDom = [border[0],border[1],border[2],border[3]];
    let borderBottomDom = [border[4],border[5]];
    let leftImageDom = [...leftImage];

    selectDom(borderTopDom, 'border', 'borderDefault', 'borderClick', true, 1);
    selectDom(borderBottomDom, 'border', 'borderDefault', 'borderClick', true);

    let imgIndex = 0;
    ckLeft.addEventListener('click',() => {
        leftImageDom.forEach(element => {
            element.className = 'leftImage opacity0';
        });
        leftImageDom[imgIndex].className = 'leftImage opacity1';
        imgIndex--;
        if (imgIndex == -1) {
            imgIndex = 2;
        }
        console.log(imgIndex);
    });

    ckRight.addEventListener('click',() => {
        leftImageDom.forEach(element => {
            element.className = 'leftImage opacity0';
        });
        leftImageDom[imgIndex].className = 'leftImage opacity1';
        imgIndex++;
        if (imgIndex == 3) {
            imgIndex = 0;
        }
        console.log(imgIndex);
    });
</script>